import React from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import style from './index.less';

interface TabNavProps {
  items: { key: string; label: string }[];
  activeKey: string;
  onChange: (key: string) => void;
}

const TabNav: React.FC<TabNavProps> = ({ items, activeKey, onChange }) => {
  const tabItems: TabsProps['items'] = items.map(item => ({
    key: item.key,
    label: item.label
  }));

  return (
    <div className={style['nav-wrapper']}>
      <Tabs 
        activeKey={activeKey} 
        items={tabItems} 
        onChange={onChange}
        className={style['top-tabs']} 
      />
    </div>
  );
};

export default TabNav; 